<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>确认订单</p>
        </header>

        <!-- 订单信息部分 -->
        <div class="order-info">
            <h5>订单配送至：</h5>
            <div class="order-info-address" @click="toUserAddress">
                <p>{{deliveryaddress!=null?deliveryaddress:'请选择送货地址'}}</p>
                <i class="fa fa-angle-right"></i>
            </div>
            <p>{{name}} | {{phone}}</p>
        </div>

        <h3>{{business.businessName}}</h3>

        <!-- 订单明细部分 -->
        <ul class="order-detailed">
            <li v-for="item in cartArr" v-show="item.quantity>=1">
                <div class="order-detailed-left">
                    <img :src="item.picture">
                    <p>{{item.name}} x {{item.quantity}}</p>
                </div>
                <p>&#165;{{item.price*item.quantity}}</p>
            </li>
        </ul>
        <div class="order-deliveryfee">
            <p>配送费</p>
            <p>&#165;{{shop_msg.dprice}}</p>
        </div>

        <!-- 合计部分 -->
        <div class="total">
            <div class="total-left">
                &#165;{{totalprice+shop_msg.dprice}}
            </div>
            <div class="total-right" @click="toPayment" v-loading="loading">
                去支付
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Orders',
        data() {
            return {
                businessId: this.$route.query.businessId,
                business: {},
                user: {},
                cartArr: [],
                deliveryaddress: null,
                shop_msg: null,
                totalprice: 0,
                totalnum: 0,
                loading: false,
                phone: 0,
                name: ""
            }
        },
        created() {
            this.businessId = this.$route.query.businessId
            this.user = JSON.parse(this.$getSessionStorage('user'));
            // console.log(this.user)
            let shopCard = this.$getLocalStorage('shop_cart')
            let address = this.$getLocalStorage(this.user.id)
            // console.log()
            if (address == null) {
                this.deliveryaddress = "请选择送货地址"
            } else {
                this.deliveryaddress = address.address
                this.phone = address.phone
                this.name = address.name
            }

            // console.log(this.deliveryaddress + "bbb")
            this.totalprice = shopCard.totalprice
            this.cartArr = shopCard.goods
            this.totalnum = shopCard.totalnum
            this.shop_msg = JSON.parse(sessionStorage.getItem('shop_msg'))

            // let stringShopCard = localStorage.getItem('shop_cart')
            // this.cartArr = JSON.parse(stringShopCard)
        },


        methods: {
            toUserAddress() {
                this.$router.push({path: '/userAddress', query: {businessId: this.businessId}});
            },
            async toPayment() {
                this.loading = true
                if (this.deliveryaddress == null) {
                    this.$alert_msg('请选择送货地址！');
                    return;
                }

                let user_phone = JSON.parse(localStorage.getItem(this.user.id))
                if (user_phone == null) {
                    this.$alert_msg('请填写联系电话！');
                    return;
                } else {
                    user_phone = user_phone.phone
                }
                let url = "/order"
                let addDishOrderDTOList = []
                this.cartArr.map(e => {
                    if (e.quantity > 0) {
                        let temp = {
                            dishCount: e.quantity,
                            dishId: e.id,
                            dishPrice: e.price
                        }
                        addDishOrderDTOList.push(temp)
                    }

                })

                let data = {
                    addDishOrderDTOList: addDishOrderDTOList,
                    address: this.deliveryaddress,
                    name: this.user.username,
                    phone: user_phone,
                    shopId: this.businessId,
                    total: this.totalprice + this.shop_msg.dprice,
                    userId: this.user.id
                }
                const res = await this.$ajax_(url, data, 'post')
                // this.$alert_res(res)
                let orderId = ""
                if (res.status === 200) {
                    orderId = res.data.list[0]
                }
                // this.loading = false
                // console.log(orderId)
                this.$router.push({path: '/payment', query: {orderId: orderId}});

            }
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 订单信息部分 ******************/
    .wrapper .order-info {
        /*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
        width: 100%;
        margin-top: 12vw;
        background-color: #0097EF;
        box-sizing: border-box;
        padding: 2vw;
        color: #fff;
    }

    .wrapper .order-info h5 {
        font-size: 3vw;
        font-weight: 300;
    }

    .wrapper .order-info .order-info-address {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        font-weight: 700;
        user-select: none;
        cursor: pointer;
        margin: 1vw 0;
    }

    .wrapper .order-info .order-info-address p {
        width: 90%;
        font-size: 5vw;
    }

    .wrapper .order-info .order-info-address i {
        font-size: 6vw;
    }

    .wrapper .order-info p {
        font-size: 3vw;
    }

    .wrapper h3 {
        box-sizing: border-box;
        padding: 3vw;
        font-size: 4vw;
        color: #666;
        border-bottom: solid 1px #DDD;
    }

    /****************** 订单明细部分 ******************/
    .wrapper .order-detailed {
        width: 100%;
    }

    .wrapper .order-detailed li {
        width: 100%;
        height: 16vw;
        box-sizing: border-box;
        padding: 3vw;
        color: #666;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .order-detailed li .order-detailed-left {
        display: flex;
        align-items: center;
    }

    .wrapper .order-detailed li .order-detailed-left img {
        width: 10vw;
        height: 10vw;
    }

    .wrapper .order-detailed li .order-detailed-left p {
        font-size: 3.5vw;
        margin-left: 3vw;
    }

    .wrapper .order-detailed li p {
        font-size: 3.5vw;
    }

    .wrapper .order-deliveryfee {
        width: 100%;
        height: 16vw;
        box-sizing: border-box;
        padding: 3vw;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 3.5vw;
    }

    /****************** 订单合计部分 ******************/
    .wrapper .total {
        width: 100%;
        height: 14vw;

        position: fixed;
        left: 0;
        bottom: 0;

        display: flex;
    }

    .wrapper .total .total-left {
        flex: 2;
        background-color: #505051;
        color: #fff;
        font-size: 4.5vw;
        font-weight: 700;
        user-select: none;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper .total .total-right {
        flex: 1;
        background-color: #38CA73;
        color: #fff;
        font-size: 4.5vw;
        font-weight: 700;
        user-select: none;
        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
